<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
</head>
<body style="TEXT-ALIGN: center">
<div style="POSITION: absolute; WIDTH: 900px; HEIGHT: 940px; TOP: 20px; LEFT: 25px;" contenteditable="true">

    <div id="title">
        <p style="COLOR: green "><u style="width: 200px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </u><span>工作派工单</span>
        </p>
    </div>
    <div id="content">
        <table border="1" cellspacing="0" bordercolorlight="green" id="workTable"
               style="table-layout:fixed;word-break:break-all;">
            <tbody>
            <tr style="HEIGHT: 30px;border-bottom: medium none" bordercolor="green">
                <td style="WIDTH: 151px;text-align: center" colspan="2">
                    派工单编号:
                </td>
                <td style="WIDTH: 700px;text-align: center" colspan="3">
                    &nbsp;
                </td>
            </tr>
            <tr style="HEIGHT: 30px;border-bottom: medium none" bordercolor="green">
                <td style="WIDTH: 151px;text-align: center" colspan="2">
                    工作负责人：
                </td>
                <td style="WIDTH: 151px;text-align: center">
                    &nbsp;
                </td>
                <td style="WIDTH: 151px;text-align: center">
                    编号
                </td>
                <td style="WIDTH: 151px;text-align: center">
                    第一小组
                </td>
            </tr>
            <tr style="HEIGHT: 90px;border-bottom: medium none" bordercolor="green">
                <td style="WIDTH: 151px; text-align: left; vertical-align: top" colspan="5">
                    人员（不包括分组工作负责人）：<br><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;人
                </td>
            </tr>
            <tr style="height: 150px;border-bottom: medium none" bordercolor="green">
                <td style="width: 151px; text-align: left;overflow: hidden; vertical-align: top" colspan="5"
                    id="workInfo">
                    <b>工作内容和工作地点：</b><br><b>1、工作内容：</b><br><br><b>2、工作地点：</b><br>
                </td>
            </tr>
            <tr style="HEIGHT: 80px;border-bottom: medium none" bordercolor="green" >
                <td style="WIDTH: 151px; text-align: left; vertical-align: top" colspan="5" id="safetyOp">
                    <b>应采取的安全措施及注意事项：</b>
                </td>
            </tr>
            <tr style="HEIGHT: 90px;border-bottom: medium none" bordercolor="green">
                <td style="WIDTH: 80px; text-align: center; vertical-align: top" colspan="2">
                    下达分组任务
                </td>
                <td style="WIDTH: 300px; text-align: left; vertical-align: top;" colspan="5">
                    工作票的工作负责人签名：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分组负责人签名：
                    <br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时间：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
                </td>
            </tr>
            <tr style="HEIGHT: 300px;border-bottom: medium none" bordercolor="green">
                <td style="WIDTH: 80px; text-align: center; vertical-align: top" colspan="2">
                    安全交代
                </td>
                <td style="WIDTH: 300px; text-align: left; vertical-align: top" colspan="5">
                    工作班人员确认分组工作负责人所交代布置的工作任务、安全措施和作业安全注意事项。<br>
                    工作班人员签名<br><br><br><br><br><br><br><br><br><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时间：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
                </td>
            </tr>
            <tr style="HEIGHT: 150px;border-bottom: medium none" bordercolor="green">
                <td style="WIDTH: 151px; text-align: left; vertical-align: top" colspan="5">
                    分组工作于 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分结束，现场临时安全措施已拆除，材料、工具已清理完毕，分组工作人员已全部撤离。<br>
                    分组工作负责人签名： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工作负责人签名：<br><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    时间：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
                </td>
            </tr>
            <tr style="HEIGHT: 150px;border-bottom: medium none" bordercolor="green">
                <td style="WIDTH: 151px; text-align: left; vertical-align: top" colspan="5">
                    备注（工作班人员变更、补充措施、安全交代补充签名等）：
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="appendixContainer" style=" text-align: left ;margin-top: 300px" ></div>
</div>

</body>
<script>
    /*
    检查工作内容空格大小
     */
    function checkTableSize() {

        const table = document.getElementById('workInfo');
        const appendixContainer = document.getElementById('appendixContainer');

        // 检查表格的高度
        const tableHeight = table.offsetHeight;
        console.log(tableHeight);

        // 如果表格高度超过一定值，生成附录
        if (tableHeight > 150) {
            const appendix = document.createElement('div');
            appendix.className = 'appendix';

            // 获取表格中的文字
            const tableContent = table.innerHTML;

            // 将表格中的文字放入附录中

            appendix.innerHTML = `
                    <h2>附录</h2>
                    <table style="width: 96%; border-collapse: collapse;">
                        <tr>
                            <td style="border: 1px solid #000; padding: 10px;">
                                <p>${tableContent}</p>
                            </td>
                        </tr>
                    </table>
                `;

            appendixContainer.appendChild(appendix);

            // 改变表格中的文字
            table.innerHTML = '<b>工作内容和工作地点：</b><br><b>1、工作内容：</b><br><br><b>2、工作地点：</b><br>内容已移至附录。';
        }

        // 监控表格单元格宽度
        const tableCells = document.querySelectorAll('td');
        tableCells.forEach(cell => {
            if (cell.scrollWidth > cell.clientWidth) {
                cell.style.wordBreak = 'break-all';
            }
        });
    }
    /*
    检查安全措施空格大小
     */
    function checkSafetyOp() {

        const table = document.getElementById('safetyOp');
        const appendixContainer = document.getElementById('appendixContainer');

        // 检查表格的高度
        const tableHeight = table.offsetHeight;
        console.log(tableHeight);

        // 如果表格高度超过一定值，生成附录
        if (tableHeight > 80) {
            const appendix = document.createElement('div');
            appendix.className = 'appendix';

            // 获取表格中的文字
            const tableContent = table.innerHTML;

            // 将表格中的文字放入附录中
            appendix.innerHTML = `
                <h2>附录</h2>
                <table style="width: 96%; border-collapse: collapse;">
                    <tr>
                        <td style="border: 1px solid #000; padding: 10px;">
                            <p>${tableContent}</p>
                        </td>
                    </tr>
                </table>
               `;

            appendixContainer.appendChild(appendix);

            // 改变表格中的文字
            table.innerHTML = '<b>应采取的安全措施及注意事项：内容已移至附录。</b>';
        }

        // 监控表格单元格宽度
        const tableCells = document.querySelectorAll('td');
        tableCells.forEach(cell => {
            if (cell.scrollWidth > cell.clientWidth) {
                cell.style.wordBreak = 'break-all';
            }
        });
    }

    // 监听窗口大小变化事件
    window.addEventListener('resize', checkSafetyOp);

    // 初始检查元素大小
    checkSafetyOp();

    // 监听元素内容变化
    const safetyOp = document.getElementById('safetyOp');
    const observer1 = new MutationObserver(checkSafetyOp);
    observer1.observe(safetyOp, {childList: true, subtree: true, characterData: true});


    // 监听窗口大小变化事件
    window.addEventListener('resize', checkTableSize);

    // 初始检查表格大小
    checkTableSize();

    // 监听表格内容变化
    const table = document.getElementById('workInfo');
    const observer = new MutationObserver(checkTableSize);
    observer.observe(table, {childList: true, subtree: true, characterData: true});


    const express = require('express');
    const app = express();
    const path = require('path');

    // 设置静态文件目录
    app.use(express.static('public'));

    // 提供HTML文件
    app.get('/page', (req, res) => {
        res.sendFile(path.join(__dirname, 'public', 'page.html'));
    });

    // 启动服务器
    app.listen(3000, () => {
        console.log('Server is running on http://localhost:3000');
    });


</script>
</html>
